<template>
  <div class="product">
    <productHeader :list='list'>
      <template #button>
        <router-link :to="`/dettail/${$route.params.id}`" class="goBuy">
          立即购买
        </router-link>
      </template>
    </productHeader>
    <div class="content">
      <div class="bg" v-for="item in list.imgList" :key="item.id">
        <img v-lazy="item.imgUrl" alt="" style="width:100%;height:750px;">
        <div class="text">{{item.text}}</div>
      </div>
      <div class="item-swiper">
        <swiper :options="swiperOption">
          <swiper-slide><img src="/imgs/product/gallery-2.png" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-3.png" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-4.png" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-5.jpg" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-6.jpg" alt=""></swiper-slide>
        </swiper>
        <p class="desc">{{list.title}}AI变焦双摄拍摄</p>
      </div>
      <div class="item-video">
        <h2>60帧超慢动作摄影<br />慢慢回味每一瞬间的精彩</h2>
        <p>后置960帧电影般超慢动作视频，将眨眼间的美妙展现得淋漓尽致！<br />更能AI 精准分析视频内容，15个场景智能匹配背景音效。</p>
        <div class="video-bg" @click="isShowVideo=true"></div>
        <!-- 播放动画时的弹窗 -->
        <div class="video-box" v-if="isShowVideo">
          <!-- 弹窗的背景颜色 -->
          <div class="overlay"></div>
          <!-- 对应点击后移动显示遮罩层 需要使用v-show v-if动画效果很生硬 -->
          <div class="video">
            <div class="icon-close" @click="isShowVideo=false"></div>
            <video src="imgs/product/video.mp4" autoplay controls></video>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'product',
  data() {
    return {
      // 控制是否播放视频
      isShowVideo: false,
      // 对应产品的数据
      list: {},
      // 轮播图的配置
      swiperOption: {
        autoplay: true,
        slidesPerView: 3,
        spaceBetween: 30,
        freeMode: true
      }
    }
  },
  mounted() {
    this.getProduct()
  },
  methods: {
    // 获取产品信息
    async getProduct() {
      const res = await this.$API.productAttr(this.$route.params.id)
      this.list = res.data
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  computed: {}
}
</script>

<style lang="scss" scoped>
.box {
  height: 100px;
}
.content {
  .item-bg {
    background: url('../../../public/imgs/product/product-bg-1.png') no-repeat center;
    height: 718px;
    text-align: center;
    h2 {
      font-size: 80px;
      padding-top: 55px;
    }
    h3 {
      font-size: 24px;
      letter-spacing: 10px;
    }
    div {
      margin-top: 21px;
      margin-bottom: 40px;
      a {
        font-size: 16px;
        color: #333333;
      }
      span {
        margin: 0 15px;
      }
    }
    .price {
      font-size: 30px;
      color: #333333;
      em {
        font-style: normal;
        font-size: 38px;
      }
    }
  }
  .bg {
    position: relative;
    background-color: black;
    .text {
      position: absolute;
      top: 20%;
      left: 25%;
      font-size: 50px;
      font-weight: 700;
      color: #fff;
    }
  }
  .item-swiper {
    margin: 36px auto 52px;
    .desc {
      font-size: 18px;
      color: #333333;
      text-align: center;
    }
    img {
      width: 100%;
    }
  }
  .item-video {
    height: 1044px;
    background-color: #070708;
    margin-bottom: 76px;
    color: #ffffff;
    text-align: center;
    h2 {
      font-size: 60px;
      padding-top: 82px;
      margin-bottom: 47px;
    }
    p {
      font-size: 24px;
      margin-bottom: 58px;
    }
    .video-bg {
      background: url('../../../public/imgs/product/gallery-1.png') no-repeat center;
      background-size: cover;
      width: 1226px;
      height: 540px;
      margin: 0 auto 120px;
      cursor: pointer;
    }

    .video-box {
      .overlay {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0.65;
      }
      .video {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1000px;
        height: 560px;
        .icon-close {
          position: absolute;
          top: 20px;
          right: 20px;
          width: 20px;
          height: 20px;
          background: url('../../../public/imgs/icon-close.png') no-repeat center;
          background-size: cover;
          cursor: pointer;
          z-index: 99;
        }
        video {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
